<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:44
 * @Description: 重要商品价格 - 放大版
-->
<template>
  <div class="left-lower">
    <com-box :title="title" class="com-box-title">
      <template #titleRight>
        <slot name="titleRight" />
      </template>
      <loading v-show="loading" />
      <div class="Price-unite-time">
        <div class="time">{{ time }}</div>
      </div>
      <div style="width: 95%; margin: auto">
        <div class="Header">
          <span>{{ header.goodsName }}</span>
          <span>{{ header.standardName }}</span>
          <span>{{ header.avgPrice }}</span>
          <span>{{ header.avgPriceD2DSub }}</span>
          <span>{{ header.avgPriceD2D }}</span>
        </div>
        <div class="main">
          <el-scrollbar
            height="650px"
            ref="scrollbar"
            @scroll="handleScroll"
            @mouseover="stopScroll"
            @mouseout="startScroll"
          >
            <ul>
              <li
                v-for="(item, index) in CurrentPriceList"
                :key="index"
                @click="onChoice(item, index)"
                :style="{ background: item.background }"
              >
                <span
                  :class="item.goodsCode == categoryIndex ? 'name-box' : 'name'"
                >
                  {{ item.goodsName }}
                </span>
                <span>
                  <p v-if="item.standardName">{{ item.standardName }}</p>
                </span>
                <span>
                  <p v-if="item.avgPrice">{{ item.avgPrice }}</p>
                </span>
                <span
                  :class="[
                    'main-num',
                    'main-span',
                    item.avgPriceD2DSub && Number(item.avgPriceD2DSub) > 0
                      ? 'red'
                      : 'green'
                  ]"
                >
                  <p
                    v-if="item.avgPriceD2DSub"
                    :class="[
                      item.avgPriceD2DSub && Number(item.avgPriceD2DSub) > 0
                        ? 'red'
                        : 'green'
                    ]"
                  >
                    {{ item.avgPriceD2DSub }}
                  </p>
                  <p v-if="item.unit" class="main-unit">
                    {{ item.unit }}
                  </p>
                </span>
                <span
                  :class="[
                    'main-span',
                    item.avgPriceD2D && item.avgPriceD2D.indexOf('-') != -1
                      ? 'green'
                      : 'red'
                  ]"
                >
                  <p
                    v-if="item.avgPriceD2D"
                    :class="[
                      parseFloat(item.avgPriceD2D) === 0 ? 'white' : '',
                      item.avgPriceD2D && item.avgPriceD2D.indexOf('-') != -1
                        ? 'green'
                        : 'red'
                    ]"
                  >
                    {{ item.avgPriceD2D }}
                  </p>
                </span>
              </li>
            </ul>
          </el-scrollbar>
        </div>
      </div>
    </com-box>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount,
  ref,
  watch
} from 'vue'
import comBox from '@/components/comBox/comBox.vue'
import loading from '@/charts/loading.vue'
import httpRequest from '@/service'
interface IMenuData {
  goodsName: string
  goodsCode: string
  avgPrice: string
  avgPriceTwo: string
  avgPriceThree: string
  avgPriceFour?: string
  avgPriceD2D: string
  avgPriceD2DTwo: string
  avgPriceD2DThree: string
  avgPriceD2DFour?: string
  background?: string
  standardName?: string
  avgPriceD2DSub?: string
  unit?: string
}
interface IState {
  timerFlag: boolean
  time: string
  title: string
  header: any
  loading: boolean
  CurrentPriceList: IMenuData[]
  categoryIndex: string
  carouselTimer: any
  timer: any
  getCurrentPrice: (val?: any) => void
}
export default defineComponent({
  name: 'leftLowerModal',
  props: {
    parameters: {
      type: Object,
      default: () => {
        return {
          adCode: '',
          classId: ''
        }
      }
    },
    classId: {
      type: String,
      default: ''
    }
  },
  components: {
    comBox,
    loading
  },
  setup(props, { emit }) {
    const state: IState = reactive({
      timerFlag: true,
      time: '',
      title: '',
      header: {}, //表头
      CurrentPriceList: [],
      loading: false,
      categoryIndex: '',
      carouselTimer: null,
      timer: null,
      getCurrentPrice: (params: any) => {
        state.loading = true
        httpRequest
          .get({
            url: 'M2P2Zyspjg',
            params
          })
          .then((res) => {
            if (res.code == 200) {
              state.title = res.title
              state.time = res.time ? `期号：${res.time}` : ''
              state.header = res.map
              state.CurrentPriceList = res.data
              state.categoryIndex = res.data[0].goodsCode
              if (
                res.data.filter(
                  (item: any) => item.goodsName === res.data[0].goodsName
                ).length >= 2
              ) {
                emit(
                  'change',
                  res.data[0].goodsCode,
                  res.data[0].goodsName + '-' + res.data[0].standardName
                )
              } else {
                emit('change', res.data[0].goodsCode, res.data[0].goodsName)
              }
            }
            state.loading = false
          })
          .catch(() => {
            console.log('请求失败')
            state.loading = false
          })
      }
    })

    const scrollbar = ref()
    let curScrollTop = 0
    onMounted(() => {
      onScroll()
    })
    const onScroll = () => {
      state.timer = setInterval(() => {
        if (state.timerFlag) {
          if (scrollbar.value) {
            curScrollTop += 1
            scrollbar.value.wrap$.scrollTop = curScrollTop
            if (
              curScrollTop >=
              scrollbar.value.wrap$.scrollHeight -
                scrollbar.value.wrap$.clientHeight
            ) {
              curScrollTop = 0
            }
          }
        }
      }, 100)
    }
    const onChoice = (item: any, index: number) => {
      state.categoryIndex = item.goodsCode
      if (
        state.CurrentPriceList.filter(
          (i: any) => i.goodsName === item.goodsName
        ).length >= 2
      ) {
        emit('change', item.goodsCode, item.goodsName + '-' + item.standardName)
      } else {
        emit('change', item.goodsCode, item.goodsName)
      }
    }
    const stopScroll = () => {
      state.timerFlag = false
    }
    const startScroll = () => {
      state.timerFlag = true
      curScrollTop = scrollbar.value.wrap$.scrollTop
    }
    // 滚动时触发
    const handleScroll = (pos: any) => {
      curScrollTop = pos.scrollTop
    }
    onBeforeUnmount(() => {
      clearInterval(state.timer)
    })
    watch(
      () => props.classId,
      (newVal) => {
        if (!newVal) {
          return false
        }
        state.getCurrentPrice({ classId: newVal })
      }
    )
    state.getCurrentPrice({ classId: props.classId })
    const refreshData = () => {
      state.getCurrentPrice({ classId: props.classId })
    }
    const { time, title, CurrentPriceList, categoryIndex, header, loading } =
      toRefs(state)
    return {
      time,
      title,
      CurrentPriceList,
      categoryIndex,
      scrollbar,
      header,
      loading,
      stopScroll,
      startScroll,
      handleScroll,
      onChoice,
      scroll,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
@MX: 1.9; // 放大倍数
.left-lower {
  height: 465px * @MX;
  width: 465px * @MX;
  overflow: hidden;
}
.left-lower .com-box-title {
  ::v-deep(.com-header) {
    height: 45px * @MX;
  }
  ::v-deep(.title) {
    font-size: 20px * @MX;
    line-height: 45px * @MX;
    background-size: 264px * @MX 45px * @MX;
    flex: 0 0 264px * @MX;
  }
}
.Price-unite-time {
  margin: 0 auto;
  width: 95%;
  .time {
    margin: 5px 0px;
    color: rgb(70, 237, 232);
    text-align: right;
    font-weight: 600;
    padding-right: 18px * @MX;
    font-family: 'Microsoft YaHei';
    font-size: 14px * @MX;
  }
}
ul {
  width: 100%;
  height: 100%;
  padding: 0 14px * @MX;
}
li {
  display: flex;
  height: 50px * @MX;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
  span {
    width: 25%;
    text-align: center;
    p:nth-child(1) {
      margin-bottom: 4px * @MX;
    }
  }
  p {
    font-size: 16px * @MX;
    font-family: 'Microsoft YaHei';
    color: #fff;
    font-weight: bold;
  }
  .red {
    font-size: 14px * @MX;
    font-weight: 550;
    color: rgb(255, 38, 38);
  }
  .green {
    font-weight: 550;
    font-size: 14px * @MX;
    color: rgb(66, 255, 0);
  }
  .name-box {
    font-size: 14px * @MX;
    font-family: 'Microsoft YaHei';
    color: rgb(255, 192, 111);
    font-weight: bold;
  }
  .name {
    font-size: 14px * @MX;
    font-family: 'Microsoft YaHei';
    color: #fff;
    font-weight: bold;
  }
  &:nth-child(even) {
    height: 54px * @MX;
    background-color: rgba(33, 122, 255, 0.2);
  }
  &:nth-child(odd) {
    width: 100%;
    height: 75px * @MX;
  }
}
.Header {
  background-color: rgba(33, 122, 255, 0.4) !important;
  height: 46px * @MX;
  z-index: 416;
  display: flex;
  align-items: center;
  justify-content: space-around;
  span {
    width: 25%;
    white-space: pre-line;
    font-size: 14px * @MX;
    font-family: 'Microsoft YaHei';
    color: rgba(160, 220, 255, 0.902);
    font-weight: bold;
    line-height: 1.714;
    text-align: center;
  }
}
.main {
  height: calc(100% - 20px * @MX);
  .main-unit {
    color: #fff;
    white-space: nowrap;
    transform: scale(0.8);
    font-weight: 500;
  }
}
</style>
